<template>
  <div class="dashboard-container">
    <el-card class="page-header">
      <h1>数据看板</h1>
      <p>系统运行概览与关键指标</p>
    </el-card>
    
    <!-- 统计卡片 -->
    <div class="stats-grid">
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-number">{{ totalUsers }}</div>
          <div class="stat-label">总用户数</div>
        </div>
        <div class="stat-icon user-icon"><User /></div>
      </el-card>
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-number">{{ activeToday }}</div>
          <div class="stat-label">今日活跃</div>
        </div>
        <div class="stat-icon active-icon"><Active /></div>
      </el-card>
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-number">{{ totalReminders }}</div>
          <div class="stat-label">提醒总数</div>
        </div>
        <div class="stat-icon reminder-icon"><Bell /></div>
      </el-card>
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-number">{{ completionRate }}%</div>
          <div class="stat-label">完成率</div>
        </div>
        <div class="stat-icon rate-icon"><TrendCharts /></div>
      </el-card>
    </div>
    
    <!-- 图表区域 -->
    <div class="charts-container">
      <el-card class="chart-card">
        <template #header>
          <div class="card-header">
            <span>用户增长趋势</span>
          </div>
        </template>
        <div class="chart" id="userGrowthChart"></div>
      </el-card>
      <el-card class="chart-card">
        <template #header>
          <div class="card-header">
            <span>提醒类型分布</span>
          </div>
        </template>
        <div class="chart" id="reminderTypeChart"></div>
      </el-card>
    </div>
    
    <!-- 最近活动 -->
    <el-card class="recent-activities">
      <template #header>
        <div class="card-header">
          <span>最近系统活动</span>
        </div>
      </template>
      <el-table :data="recentActivities" style="width: 100%">
        <el-table-column prop="time" label="时间" width="180"></el-table-column>
        <el-table-column prop="type" label="类型" width="120"></el-table-column>
        <el-table-column prop="description" label="描述"></el-table-column>
        <el-table-column prop="status" label="状态" width="80">
          <template #default="scope">
            <el-tag :type="scope.row.status === 'success' ? 'success' : 'warning'">
              {{ scope.row.status === 'success' ? '成功' : '失败' }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { User, Bell, TrendCharts } from '@element-plus/icons-vue'
import axios from 'axios'

// 统计数据
const totalUsers = ref(1280)
const activeToday = ref(423)
const totalReminders = ref(8921)
const completionRate = ref(78.5)

// 最近活动数据
const recentActivities = ref([
  { time: '2023-07-25 14:30', type: '登录', description: '管理员登录系统', status: 'success' },
  { time: '2023-07-25 13:45', type: '推送', description: '发送季节性鼻炎预警提醒', status: 'success' },
  { time: '2023-07-25 12:10', type: '新增', description: '新增用户张三注册', status: 'success' },
  { time: '2023-07-25 10:05', type: '更新', description: '更新提醒模板：提肛运动', status: 'success' },
  { time: '2023-07-25 09:20', type: '系统', description: '定时任务执行：数据备份', status: 'success' }
])

// 用户增长趋势图表
let userGrowthChart = null
// 提醒类型分布图表
let reminderTypeChart = null

// 初始化用户增长图表
const initUserGrowthChart = () => {
  const chartDom = document.getElementById('userGrowthChart')
  userGrowthChart = echarts.init(chartDom)
  
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [120, 200, 300, 450, 600, 800],
        type: 'line',
        smooth: true,
        areaStyle: {
          opacity: 0.3
        }
      }
    ]
  }
  
  userGrowthChart.setOption(option)
}

// 初始化提醒类型分布图表
const initReminderTypeChart = () => {
  const chartDom = document.getElementById('reminderTypeChart')
  reminderTypeChart = echarts.init(chartDom)
  
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: 'bottom'
    },
    series: [
      {
        name: '提醒类型',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 4200, name: '提肛运动' },
          { value: 2800, name: '鼻炎护理' },
          { value: 1200, name: '饮食提醒' },
          { value: 721, name: '其他' }
        ]
      }
    ]
  }
  
  reminderTypeChart.setOption(option)
}

// 获取统计数据
const fetchDashboardData = () => {
  // 实际项目中应该从后端获取数据
  // 这里使用模拟数据
  console.log('获取仪表盘数据...')
}

// 处理窗口大小变化
const handleResize = () => {
  if (userGrowthChart) userGrowthChart.resize()
  if (reminderTypeChart) reminderTypeChart.resize()
}

onMounted(() => {
  fetchDashboardData()
  // 延迟初始化图表，确保DOM已渲染
  setTimeout(() => {
    initUserGrowthChart()
    initReminderTypeChart()
  }, 100)
  
  // 监听窗口大小变化
  window.addEventListener('resize', handleResize)
})

// 清理图表实例
const cleanup = () => {
  window.removeEventListener('resize', handleResize)
  if (userGrowthChart) {
    userGrowthChart.dispose()
    userGrowthChart = null
  }
  if (reminderTypeChart) {
    reminderTypeChart.dispose()
    reminderTypeChart = null
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.page-header h1 {
  margin: 0 0 10px 0;
  font-size: 24px;
}

.page-header p {
  margin: 0;
  color: #606266;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 20px;
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 32px;
  font-weight: bold;
  color: #1890ff;
}

.stat-label {
  font-size: 14px;
  color: #606266;
  margin-top: 5px;
}

.stat-icon {
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 24px;
}

.user-icon {
  background-color: #ecf5ff;
  color: #1890ff;
}

.active-icon {
  background-color: #f0f9ff;
  color: #36cfc9;
}

.reminder-icon {
  background-color: #fff7e6;
  color: #fa8c16;
}

.rate-icon {
  background-color: #f6ffed;
  color: #52c41a;
}

.charts-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.chart-card {
  height: 400px;
}

.chart {
  height: 320px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.recent-activities {
  margin-top: 20px;
}

@media (max-width: 1200px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .charts-container {
    grid-template-columns: 1fr;
  }
}
</style>